import { Component, JSX, Show, createSignal } from 'solid-js';
import { Card, CardContent } from '@/components/ui/card';
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious
} from '@/components/ui/carousel';
import Autoplay from "embla-carousel-autoplay"

interface BaseCarouselProps {
  loading?: boolean;
  renderItem: (item: any) => JSX.Element;
  renderSkeleton: () => JSX.Element;
  items?: any[];
  class?: string;
}

const BaseCarousel: Component<BaseCarouselProps> = (props) => {
  return (
    <div class={"relative w-full group " + props.class} >
      <Carousel
        opts={{
          align: 'start',
          loop: true
        }}
        plugins={[
          Autoplay({
            delay: 2000
          })
        ]}
        class="w-full"
      >
        <CarouselContent class="-ml-1">
          <Show
            when={!props.loading}
            fallback={
              <>
                {Array(3).fill(0).map(() => (
                  <CarouselItem class="pl-1 basis-full sm:basis-1/2 lg:basis-1/3">
                    <Card>
                      <CardContent class="flex items-center justify-center p-2 sm:p-4 lg:p-6">
                        {props.renderSkeleton()}
                      </CardContent>
                    </Card>
                  </CarouselItem>
                ))}
              </>
            }
          >
            {props.items?.map((item) => {
              // 如果item包含url属性，说明是图片类型的轮播项
              if (item.url) {
                const [isLoaded, setIsLoaded] = createSignal(false);
                const img = new Image();
                img.onload = () => {
                  if (img.naturalWidth > 0) {
                    setIsLoaded(true);
                  }
                };
                img.src = item.url;
                
                return (
                  <Show when={isLoaded() || (img.complete && img.naturalWidth > 0)}>
                    <CarouselItem class="pl-1 basis-full sm:basis-1/2 lg:basis-1/3">
                      <Card class='overflow-hidden'>
                        <CardContent class="flex items-center justify-center p-0">
                          {props.renderItem(item)}
                        </CardContent>
                      </Card>
                    </CarouselItem>
                  </Show>
                );
              }
              
              return (
                <CarouselItem class="pl-1 basis-full sm:basis-1/2 lg:basis-1/3">
                  <Card class='overflow-hidden'>
                    <CardContent class="flex items-center justify-center p-0">
                      {props.renderItem(item)}
                    </CardContent>
                  </Card>
                </CarouselItem>
              );
            })}
          </Show>
        </CarouselContent>
        <CarouselPrevious class="left-3 opacity-0 group-hover:opacity-100 transition-opacity bg-background/80 hover:bg-background" />
        <CarouselNext class="right-3 opacity-0 group-hover:opacity-100 transition-opacity bg-background/80 hover:bg-background" />
      </Carousel>
    </div>
  );
};

export default BaseCarousel;